<template>
  <div>
    <!-- v-model将数据绑定在表单元素，实现数据的双向绑定 -->
    <!-- 双向绑定： 修改input里面的值 页面值也跟着改变  -->
    <input type="text" v-model="msg">
    <h1>{{ msg }}</h1>

    <!-- 修饰符 -->
     <p>
      <!-- .lazy懒加载 失去焦点的时候执行双向绑定 -->
      <input type="text" v-model.lazy="msg">
     </p>

     <p>
      <!-- number 数字 如果input 一开始不是一个数字，功能失效 -->
      <input type="text" v-model.number="num">{{ typeof num }}
     </p>
     <p>
      <!-- .trim去掉前后空格 -->
      <input type="text" v-model.trim="msg">
     </p>
     <hr>
     <!--checkbox 可以通过双向绑定一个布尔值 控制是否选中  -->
    <input type="checkbox" v-model="isOK">{{ isOK }}

    <h2>多个多选框</h2>
    <!-- 通过数组绑定多个 数组绑定value值 -->
    <input type="checkbox" value="0" v-model="arr">大凤
    <input type="checkbox" value="1" v-model="arr">二凤
    <input type="checkbox" value="2" v-model="arr">三凤
    {{ arr }}

    <h2>绑定单选框</h2>
    <div>
      <input type="radio" value="0" name="gender" v-model="gender">男
      <input type="radio" value="1" name="gender" v-model="gender">女
      {{ gender }}
    </div>
    <!-- @+事件名 绑定相应事件 -->
    <button @click="change">切换性别</button>
    <!-- .enter 按回车触发 -->
    <button @keyup.enter="sum"></button>
</div>
</template>
<script>
export default{
  // 数据 
  data(){
    return{
      msg:'孙悟空',
      num:null,
      isOK:true,
      arr:['1'],
      gender:0
    }
  },
  // 方法
  methods:{
    change(){
      // 通过this方法修改变量
      console.log(this)
      this.gender = this.gender === 1 ? 0 : 1;
    },
    sum(){

    }
  }

} 
</script>
<style lang="scss" scoped>

</style>